<template>
  <div cclass="app-container">
    <div class="box" >
      <div class="item"   v-for="item in selections">
        <img :src="require(`../../assets/${item.image}`)" alt="" width="200" height="200">
        <div>
         {{item.name}}
        </div>
        <div>￥ {{item.price}}元</div>
      </div>
    </div>
    <div>
      <Button type="primary" class="btn" @click="page('first')">首页</Button>
      <Button type="primary" class="btn" @click="page('previous')">上一页</Button>
      <Button type="primary" class="btn" @click="page('next' )">下一页</Button>
      <Button type="primary" class="btn" @click="page('last')">最后一页</Button>
    </div>
   
  </div>
</template>

<script>
import { queryList } from "@/api/getData.js";

export default {
  data() {
    return {
      params: {
        pageNo: 1,
        pageSize:5
      },
      pages:1,
      loading: false,
      selections: []
    };
  },

  mounted() {
    this.request();
  },
  methods: {
    async request() {
      this.loading = true;
      let { data } = await queryList(this.params);
      this.selections = data.list;
      this.pages = data.pages
      this.loading = false;
    },
    selectChange(args) {
      this.selections = [...args];
    },
    page(type){
      if(type == "first"){
        if(this.params.pageNo == 1){
          return
        }
        this.params.pageNo = 1
      }else if(type == "previous"){
        if(this.params.pageNo <= this.pages){
          if(this.params.pageNo >1){
            this.params.pageNo--
          }else if(this.params.pageNo == 1){
            return
          }
        }
      }else if(type == "next"){
        if(this.params.pageNo < this.pages){
          if(this.params.pageNo < this.pages){
            this.params.pageNo++
          }
        }else if(this.params.pageNo == this.pages){
            return
          }
      }else if(type == "last"){
        if(this.params.pageNo == this.pages){
          return
        }
        this.params.pageNo = this.pages
      }
      this.request();
    }
  }
};
</script>

<style scoped>
.box{
  display: flex;
  justify-content: center;
  padding: 20px;
}
.item{
  width: 200px;
  height: 280px;
  border: 1px solid #2d8cf0;
  border-radius: 10px;
  margin-right: 15px;
  font-size: 14px;
  overflow: hidden;
  line-height: 30px;
}
.btn{
  margin-right: 20px;
}
</style>